import React, { useCallback, useState } from "react";
import styles from "./style.module.scss";
import cn from "classnames";
import { FormattedMessage, useIntl } from "react-intl";
import { UserOutlined, LockOutlined, VerifiedOutlined } from "@ant-design/icons";
import { Button, App } from "antd";
import { InputBox, VerifyCode } from "./LoginInput";
import { Form, LibAppView as AppView } from "../../lib";
import { loginForm, useSubmit } from "./useLogin";
import { LoginReducer } from "../Admin/data/Login";
import { useLocation } from "react-router-dom";
import { useSite } from "../Admin/hooks/useSite";

const { useViewState } = LoginReducer;

export const PCLoginForm = ({ publicKey, encrypt }: any) => {
    const intl = useIntl();
    const formRef = loginForm.useFormRef();
    const submitFunc = useSubmit(formRef, { publicKey, encrypt });
    const app = AppView.useApp();
    const location = useLocation();
    const siteInfo = useSite();
    const { message } = App.useApp();
    const [ showLoading, setShowLoading ] = useState(false);
    const onSubmit = useCallback(() => {
        setShowLoading(true);
        setTimeout(() => {
            submitFunc().then(() => {
                setShowLoading(false);
                const fromUrl = location.state?.from;
                if(fromUrl && !/\/login/i.test(fromUrl)) {
                    window.location.href = fromUrl;
                } else {
                    app.goHome();
                }
            }).catch((err) => {
                console.log(err.statusCode);
                setShowLoading(false);
                console.error(intl.locale);
                message.error(intl.formatMessage({ 
                    id: "admin.login.error.invalid." + err.statusCode,
                    defaultMessage: err.message || "账号或密码错误"
                }));
            });
        }, 2000);
    }, [showLoading]);
    return (<>
        <section className={cn(styles.loginPcForm, showLoading && styles.loginHideInputForm)}>
            <div>
                <section className={styles.loginImg}>

                </section>
                <section className={styles.loginFormArea}>
                    
                    <section className={styles.loginInputForm}>
                        <header>
                            <h1 className={styles.loginPlatformName}>{ siteInfo.sitename || "“科普江苏”数字化综合服务平台"} </h1>
                        </header>
                        <section>
                            <div className={styles.clearFix}>
                                <Form form={formRef} onSubmit={onSubmit}>

                                    <InputBox
                                        name="username"
                                        label={<FormattedMessage id="admin.login.username" defaultMessage="User name" />}
                                        icon={<UserOutlined />}
                                        placeholder={intl.formatMessage({
                                            id: "admin.login.username.placeholder"
                                        })}
                                    />
                                    <InputBox
                                        name="password"
                                        type="password"
                                        label={<FormattedMessage id="admin.login.password" defaultMessage="Password" />}
                                        icon={<LockOutlined />}
                                        placeholder={intl.formatMessage({
                                            id: "admin.login.password.placeholder"
                                        })}
                                    />
                                    <InputBox
                                        name="verifyCode"
                                        label={<FormattedMessage id="admin.login.verify" defaultMessage="Verify code" />}
                                        icon={<VerifiedOutlined />}
                                        placeholder={intl.formatMessage({
                                            id: "admin.login.verify.placeholder"
                                        })}
                                    >
                                        <VerifyCode />
                                    </InputBox>
                                    <Button htmlType="submit" type="primary" size={"large"}>
                                        <FormattedMessage id="admin.login.button.submit" defaultMessage="Submit" />
                                    </Button>
                                </Form>
                            </div>
                            
                        </section>
                    </section>
                </section>
            </div>
        </section>
        <div className={cn(styles.lodingSpinner, showLoading && styles.loginLoadingActive)}></div>
    </>);
};